<template>
    <!-- ref在模版中使用就是获取标签元素，类似于id属性 -->
    <h1 id="h1Id" ref="h1Ref">我的</h1>
    <p>{{ msg }}</p>
    <button @click="changeMsg">修改数据</button>
    <!-- 路由组件跳转标签 -->
    <router-link to="/">首页</router-link>
</template>

<script lang="ts" setup>

    import{ref, onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"


    //接受state传递的参数
    console.log("接受：",history.state.name);
    
    //在这个时候模版还没有挂载到页面上。所以还拿不到h1元素
    const h1Ref = ref<HTMLElement | null>(null)
    console.log("setup:",h1Ref.value);//在setup中一般会进行定义响应式数据、函数方法、发送ajax请求

    const msg = ref<string>("初始数据")

    function changeMsg(){
        msg.value="新的数据"
    }

    //正在创建和编译模版，此时模版还没有挂载到页面上
    onBeforeMount(()=>{
        console.log("onBeforeMount:",h1Ref.value);
    })

    //模版已经挂载到页面上才可以拿到
    //这个方法其实就是模版挂载完成
    //一般在这个周期会进行dom元素的事件监听，开启定时器
    onMounted(() => {
        console.log("onMounted:",h1Ref.value);
        //通过js中的id获取方法去拿到元素
        console.log("onMounted-id:",document.getElementById("h1Id"));
    });

    //状态更新时执行此函数，定义的响应式数据发生改变就会触发此方法
    onBeforeUpdate(()=>{
        console.log("onBeforeUpdate:",msg.value);
    })
    //状态更新之后会执行此函数，相当于渲染数据时打了一个补丁
    //一般在这个周期方法会做模版数据刷新，重新发送ajax请求
    onUpdated(()=>{
        console.log("onUpdated:",msg.value);
    })

    //当前组件实例正在销毁（正在取消页面的挂载）
    //在这个周期方法进行取消dom元素的监听、清空定时器
    onBeforeUnmount(()=>{
        console.log("onBeforeUnmount:正在销毁");
    })

    //当前组件实例已经销毁（已经取消页面的挂载）
    onUnmounted(()=>{
        console.log("onUnmounted:已经销毁");
    })
</script>